<template>
    <div>
    </div>
</template>

<script setup lang="ts">
import { useVueCesium } from 'vue-cesium'
import type { VcViewerProvider, VcReadyObject } from 'vue-cesium/es/utils/types'

const $vc: VcViewerProvider = useVueCesium()

$vc.creatingPromise.then((readyObj: VcReadyObject) => {

    let Cesium: any = readyObj.Cesium
    let viewer = readyObj.viewer

    // 图片雷达
    let rader = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(106.23, 38.49),
        name: '图片雷达',
        ellipse: {
            semiMajorAxis: 2000.0,
            semiMinorAxis: 2000.0,
            material: new Cesium.ImageMaterialProperty({
                image: new URL('./color.png', import.meta.url).href,
                color: new Cesium.Color.fromCssColorString('#00ffff').withAlpha(0.5)
                // new Cesium.Color(1.0, 1.0, 0.0, 0.7),
            }),
            // 不设置高度则无法渲染外框线
            // height: 20.0,
            // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
            // outline: true,
            // outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
        }
    })

    rotateMaterial(rader.ellipse, 0, -1);

    /**
     * @description: 旋转材质
     * @param {*} instance ：实体
     * @param {*} _stRotation : 初始材质旋转角度
     * @param {*} _amount ：旋转角度变化量
     * @return {*}
     */
    function rotateMaterial(instance, _stRotation, _amount) {
        instance.stRotation = new Cesium.CallbackProperty(function () {
            _stRotation += _amount;
            if (_stRotation >= 360 || _stRotation <= -360) {
                _stRotation = 0;
            }
            return Cesium.Math.toRadians(_stRotation);
        }, false)
    }


    // readyObj.viewer.flyTo(rader);

})

</script>